<!DOCTYPE html>
<html>
<head>
    <title>{$name} {$seo_title} {$site_name}</title>
    <meta name="keywords" content="{$seo_keywords}" />
    <meta name="description" content="{$seo_description}">
    <tc_include file="Public:head" />
    <link href="/themes/simplebootx/Public/assets/css/reset.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/public/css/sl_style.css?v={$SOURCE_VERSION}">
    <link rel="stylesheet" href="__PUBLIC__/swiper/swiper.min.css">
    <style>
        body {
            padding-top:50px;
        }
        .ellipsis3 {overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;}
        .ellipsis2 {overflow: hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
        .container {
            width: 1198px;
        }
        /*顶部背景标题*/
        .top_bgc {
            -webkit-background-size: 100% 100%;
            height: 150px;
            padding-top: 150px;
        }
        .top_bgc .top_bgc_ground {
            width: 1198px;
            margin: 0 auto ;
            position: relative;
        }
        .top_bgc .top_bgc_ground h3,.top_bgc .top_bgc_ground .text-groud{
            float: right;
            overflow: hidden;
        }
        .top_bgc .top_bgc_ground .text {
            width: 298px;
            max-height: 128px;
            color: #FFFFFF;
            font-size: 14px;
            line-height: 22px;
            padding-left: 10px;
            border-left: 1px solid rgba(255,255,255,0.8);
            margin-top: -4px;
            height: 310px;
            padding-top: 2px;
            padding-bottom: 2px;

        }
        .top_bgc .top_bgc_ground h3 {
            font-size: 24px;
            text-align: right;
            line-height: 32px;
            color: #FFFFFF;
            letter-spacing: 2px;
            margin: -3px 10px 0 0;
            width: 400px;
            height: 96px;
        }
        .top_bgc  .money {
            font-size: 24px;
            color: #fff;
            font-weight: bolder;
            letter-spacing: 1px;
            clear: both;
           position: absolute;
            right: 330px;
            top: 106px;

        }
        /*标题样式*/
        .college_title {
            height: 38px;
            padding-top: 42px;
            letter-spacing: 1px;
            margin-bottom: 12px;
        }
        .college_title h3 {
            color: #000232;
            font-size: 18px;
            font-weight: bold;
            line-height: 22px;
            padding-left: 24px;
            background: url("/public/images/img/line_yellow.png") center left no-repeat;
            -webkit-background-size: 20px 18px;
            background-size: 20px 18px;
        }
        /*学院*/
        .college {
            overflow: hidden;
            padding-bottom: 4px;
            padding-top: 20px;
        }
        .college .college_item:nth-child(4n){
            margin-right: 0;
        }
        .college .college_item {
            width: 280px;
            height:260px;
            box-shadow: 0px 3px 6px 0px
            rgba(0, 0, 0, 0.16);
            border-radius: 6px;
            float: left;
            margin: 0 22px 24px 2px;
        }
        .college .college_item .img_ground {
            width: 280px;
            height: 156px;
        }
        .college_item .img_ground img{
            width: 100%;
            height: 100%;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        .college_item .text {

        }
        .college_item .text h3{
            color: #333333;
            font-size: 18px;
            line-height: 22px;
            margin-top: 4px;
            padding: 0 8px;
            font-weight: bold;
            margin-bottom: 6px;
            height: 45px;
        }

        .college_item .text img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            /*float: left;*/
        }
        .college_item .text_btm {
            height: 40px;
            line-height: 40px;
            padding-left: 8px;
        }
        .college_item .text_btm .name {
            font-size: 12px;
            margin-left: 8px;
            font-weight: bold;
            letter-spacing: 2px;
        }
        .college .college_money{
            font-size: 24px;
            color: #0e2679;
            float: right;
            margin-right: 10px;
            font-weight: bolder;
        }
    </style>
    <style>
        .pay_code{
            position: relative;
            /*height: 375px;*/
            height: 325px;
            /*background:url("/public/images/active/pay_code.png") no-repeat center;*/
            -webkit-background-size: 375px 375px;
            background-size: 375px 375px;
            border: none;
            display: none;
            padding-top: 50px;

        }
        .pay_code img {
            width: 190px;
            height: 184px;
            display: block;
            margin:0 0 25px 92px ;
            position: relative;
        }
        .pay_code .text {
            font-size: 14px;
            letter-spacing: 1px;
            color: #000232;
            text-align: center;
            position: absolute;
            top: 224px;
            left: 50%;
            margin-left: -68px;
        }
        .pay_code .yes {
            width: 120px;
            height: 30px;
            color: #FFFFFF;
            font-size: 14px;
            letter-spacing: 1px;
            background-color: #b60a60;
            text-align: center;
            line-height: 30px;
            margin: 0 auto;
            border-radius: 10px;
        }
        .layui-layer-shade {
            background-color: #000!important;
        }
        .layui-layer-shade {
            border-radius: 0px;
        }
    </style>
</head>
<body>

<tc_include file="Public:nav" />
<div class="top_bgc" >
    <div class="top_bgc_ground clearfix">
        <div class="text-groud">
            <p class="text ellipsis6">{$subject_info.subject_desc}</p>
        </div>
        <h3 class="ellipsis3">{$subject_info.subject_name}</h3>
        <p class="money">￥<span>{$subject_info.subject_price}</span></p>
    </div>
</div>
<div class="container tc-main" >
    <div class="college_title">
        <h3>专题课程</h3>
    </div>
    <div class="college">
        <volist name="lists" id="vo">
            <div class="college_item" data-url="{:U('Lesson/Lesson/lesson_index', ['id' => $vo['id']])}" free="{$vo['free']}">
                <div class="img_ground">
                    <img src="{:sp_get_asset_upload_path($vo['lesson_img'])}" alt="">
                </div>
                <div class="text">
                    <h3 class="ellipsis2">{$vo.lesson_name}</h3>
                    <div class="text_btm">
                        <img src="{:sp_get_user_avatar_url($vo['avatar'])}" alt="">
                        <span class="name">{$vo.user_nicename}</span>
                    </div>
                </div>
            </div>
        </volist>
    </div>
</div>

<!--二维码支付弹窗-->
<div class="pay_code" id="pay_qrcode">
    <img src="" alt="">
    <p class="text">打开微信扫一扫付款</p>
    <p class="yes has_pay_btn">已支付</p>
</div>

<tc_include file="Public:footer" />
<!-- JavaScript -->
<tc_include file="Public:scripts" />
<script type="text/javascript" src="__PUBLIC__/js/layer/layer_1.js"></script>
<script>
    $(document).ready(function () {
        $('.top_bgc').css('background', "url({:sp_get_asset_upload_path($subject_info['subject_pc_img'])}) top left no-repeat");
        $('.top_bgc').css('background-size', '100% 100%');

        $('body').delegate('.college_item', 'click', function () {
            var has_buy = "{$has_buy}";
            var free    = $(this).attr('free');
            if (has_buy < 0 && free <= 0) {
                var url = "{:U('Lesson/Lesson/lesson_buy', ['subject_id' => $subject_info['id']])}";
                $.get(url + "&pay_type=1", {}, function (re) {
                    if (typeof(re) != 'string') {
                        layer.msg(re.info);
                        if (re.info == '请先登录') {
                            setTimeout(function () {
                                window.location.href = "{:U('User/Login/index', array('redirect' => base64_encode($_SERVER['REQUEST_URI'])))}";
                            }, 1500);
                        }
                        return;
                    } else {
                        $('#pay_qrcode').find('img').attr('src', url + "&pay_type=1");
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 1,
                            area: '375px',
                            shadeClose: true,
                            content: $('#pay_qrcode')
                        });
                    }
                });
            } else {
                var url = $(this).attr('data-url');
                window.location.href = url;
            }
        });

        $('body').delegate('.has_pay_btn', 'click', function () {
            window.location.reload();
        });
    });
</script>
</body>
</html>